<template>
  <div id="home-discussion">
    <div class="my-post card">
      <div class="post-area">
        <textarea
            placeholder="写点什么吧"
            rows="9"
            v-model="postContent"
            class="post-text"
        ></textarea>
        <div class="labels">
          <span
              v-for="item in labels"
              :key="item.title"
              @click="choseLabel(item)"
              :class="{ 'chosen-label': item === chosenLabel }"
          >
            #{{ item.title }}
          </span>
        </div>
        <div class="pics"></div>
      </div>
      <div class="operations">
        <ImageGallery
            :srcs="addedPics"
            type="shot"
            @change="handlePicChange"
            @delete="deletePic"
        ></ImageGallery>
        <div class="primary-btn">确定</div>
      </div>
    </div>
    <div class="post-list">
      <div class="head">
        <div class="title">全部帖子</div>
        <div class="sorts">
          <span
              :class="['sort', { 'sort-chosen': sort === item }]"
              v-for="item in sorts"
              :key="item"
              @click="getSort(item)"
          >{{ item }}</span
          >
        </div>
      </div>
      <div
          v-loading="loading"
          element-loading-text="加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.01)"
      >
        <div class="list-item card" style="min-height: 200px">
          <Post :post="item" v-for="item in postList" :key="item.id"></Post>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Post from "_c/Post";
import ImageGallery from "../../components/ImageGallery.vue";

export default {
  name: "Discussion",
  components: {Post, ImageGallery},
  data() {
    return {
      loading: false,
      labels: [
        {title: "产品经理日常"},
        {title: "互联网大小事"},
        {title: "好玩的文案"},
        {title: "绝妙的设计"},
      ],
      chosenLabel: "",
      sorts: ["最新", "精选"],
      sort: "最新",
      postContent: "",
      postList: [],
      addedPics: [],
    };
  },
  mounted() {
    this.getDiscussionList();
  },
  methods: {
    getDiscussionList() {
      this.loading = true;
      var params = {
        pageSize:20,
        pageNow:1,
      }
      this.$api
          .getDiscussionList(params)
          .then(({data}) => {
            console.log(data)
            this.loading = false;
          });
    },
    getSort(sort) {
      this.$router.push({
        name: "home-discussion",
        query: {
          sort,
        },
      });
    },
    handelQuery({sort}) {
      if (!sort || this.sorts.includes(sort)) {
        this.sort = sort || "最新";
        this.getDiscussionList();
      } else {
        this.$router.push({
          name: "home-discussion",
          query: {
            sort,
          },
        });
      }
    },
    handlePicChange(e) {
      let files = e.target.files;
      for (let file of files) {
        let url = null;
        if (window.createObjectURL != undefined) {
          // basic
          url = window.createObjectURL(file);
        } else if (window.URL != undefined) {
          // mozilla(firefox)
          url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) {
          // webkit or chrome
          url = window.webkitURL.createObjectURL(file);
        }
        this.addedPics.push(url);
      }
    },
    deletePic(i) {
      this.addedPics.splice(i, 1);
    },
    choseLabel(label) {
      if (this.chosenLabel === label) {
        this.chosenLabel = "";
      } else {
        this.chosenLabel = label;
      }
    },
  },
  watch: {
    $route(to) {
      this.handelQuery(to.query);
    },
  },
};
</script>

<style scoped lang="scss">
.list-item {
  padding: 20px;
  margin-bottom: 20px;
}

.my-post {
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;

  .post-area {
    flex: 1;
  }

  .labels {
    margin-bottom: 20px;
    font-size: 14px;

    span {
      cursor: pointer;
      margin-right: 10px;
      transition: 0.3s;

      &:hover {
        transition: 0.3s;
        color: #357ff8;
      }

      &.chosen-label {
        transition: 0.3s;
        color: #357ff8;
        font-weight: bolder;
        text-shadow: 0 4px 4px #357ff845;
      }
    }
  }

  .operations {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    .pics > .img-box,
    label img {
      width: 80px;
      height: 80px;
      border-radius: 10px;
      margin-right: 10px;
      cursor: pointer;
    }
  }
}

.post-list {
  .head {
    > div {
      margin-bottom: 20px;
    }

    .title {
      font-size: 18px;
    }

    .sort {
      margin-right: 20px;
      font-size: 14px;
      cursor: pointer;
    }

    .sort-chosen {
      font-weight: bolder;
    }
  }
}
</style>
